<template>
  <div>
    <h1>hello</h1>
    <!-- NuxtLink相当于是router-link  -->
    <NuxtLink to="/about">about</NuxtLink>
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.bookname }}</li>
    </ul>
    <button @click="$store.commit('count/add')">按钮</button>
    <p>count的值是：{{ $store.state.count.count }}</p>
    <button @click="fn">按钮</button>
  </div>
</template>

<script>
export default {
  // 类似created一样的一个钩子函数
  // asyncData相当于vue中的created 
  async asyncData ({ $axios }) {
    const res = await $axios.$get('http://ajax-api.itheima.net/api/books')
    // 只要是asyncData返回 的数据，就可以直接在模板中去使用
    return { list: res.data }
  },
  methods: {
    fn () {
      this.$toast.success('成功的提示')
    }
  }
}
</script>